<template>
	<div class="footer_box">
		<div class="footer">
			<!--音乐图-->
			<div class="SongFigure"><img :src="imgs" /></div>
			<!--音乐标题-->
			<div class="SongName">
				<router-link to="/indexTwo">
					<h2>{{this.$store.state.curInfo}}</h2>
					<h4>{{this.$store.state.curTitle}}</h4>
				</router-link>
			</div>
			<!--播放-->
			<div class="play_box">
				<div class="play" @click="boF"><img :src="src" /></div>
			</div>
			<!--下一曲-->
			<div class="TheNextSong_box">
				<div @click="xiayiqu" class="TheNextSong"><img src="../images/L)JCKU53N]DP2Q6A(JQUJ{5_06.png" /></div>
			</div>
			<!--列表-->
			<div class="tabulation_box">
				<div class="tabulation"><img src="../images/zhuant.png" /></div>
			</div>
		</div>
	</div>
</template>
<script>
	import jsonp from "jsonp";
	export default {
		name: "footer_box",
		data() {
			return {
				title: "index",
				info: "index",
				src:"../images/zantin2.png"
			}
		},
		computed: {
			imgs() {
				return this.$store.state.songID;
			},
		},
		methods: {
			boF() {
				if(this.$store.state.bof){
					this.src = "../images/L)JCKU53N]DP2Q6A(JQUJ{5_03.png"
					this.$store.commit("bofo",false)					
				}else{
					this.src = "../images/zantin2.png"
					this.$store.commit("bofo",true)			
				}
			},
			xiayiqu(){
				var a = this.$store.state.musicIndex+1;
				if(a>this.$store.state.musicList.length-1){
					a=0
				}
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + this.$store.state.musicList[a].song_id, null, (err, res) => {
					if(err) {
						console.log(err)
					} else {
						console.log(res)
						this.$store.commit("changSong", res.bitrate.file_link)
						this.$store.commit("changeid", res.songinfo.pic_big)
						this.$store.commit("changtitle", res.songinfo.title)
						this.$store.commit("changinfo", res.songinfo.info)
					}
				})
				this.$store.commit("musicIndex",a)
			}
		},
	}
</script>

<style scoped lang="scss">
	.footer_box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fafafa;
		border-top: 1px solid #9b9b9b;
		box-sizing: border-box;
		/*padding-right: 1.4%;*/
		.footer {
			width: 93%;
			height: 17%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 1.6% 0;
			/*音乐图*/
			.SongFigure {
				position: relative;
				overflow: hidden;
				padding-top: 14%;
				width: 14%;
				img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			/*音乐标题*/
			.SongName {
				width: 43%;
				margin-left: 2.4%;
				margin-right: 4%;
				text-align: left;
				a {
					width: 100%;
					height: 100%;
					h2 {
						line-height: 16px;
						font-size: 16px;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 16%;
						padding-top: 4%;
					}
					h4 {
						padding-top: 2%;
						line-height: 12px;
						font-size: 12px;
						font-weight: 400;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						/*padding-top: 6%;*/
						color: #838383;
						transform: scale(.9);
						transform-origin: left;
						text-align: left;
					}
				}
			}
			/*播放*/
			.play_box {
				width: 10%;
				.play {
					width: 100%;
					padding-top: 66%;
					position: relative;
					overflow: hidden;
					top: 50%;
					transform: translate(0, -50%);
					img {
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			/*下一曲*/
			.TheNextSong_box {
				width: 18%;
				.TheNextSong {
					width: 33%;
					padding-top: 22%;
					position: relative;
					overflow: hidden;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					img {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			/*列表*/
			.tabulation_box {
				width: 9%;
				margin-right: 1%;
				.tabulation {
					padding-top: 80%;
					width: 100%;
					position: relative;
					overflow: hidden;
					top: 50%;
					transform: translate(0, -50%);
					img {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
</style>